---
import type { Props } from "@astrojs/starlight/props";
import StarlightFooter from "@astrojs/starlight/components/Footer.astro";
import { Image } from "astro:assets";
---

<StarlightFooter {...Astro.props}>
  <slot />
</StarlightFooter>
<footer class="real-footer">
  <a href="https://linwood.dev" target="_blank">
    <Image
      src="https://www.linwood.dev/logos/logo.png"
      width="32"
      height="32"
      alt="Linwood"
    />
  </a>
  <div class="row">
    <a target="_blank" class="btn" href="https://linwood.dev/imprint">Imprint</a
    >
    <a target="_blank" class="btn" href="https://linwood.dev/privacypolicy"
      >Privacy policy</a
    >
  </div>
</footer>

<style lang="scss">
  .real-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 0.4rem;
    margin-top: 5rem;
    background-color: var(--sl-color-gray-6);
    padding: 0.5rem 1rem;
    margin-left: auto;
    margin-right: auto;
  }
  .row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
  }
  .divider {
    align-self: stretch;
    width: 2px;
    background-color: var(--sl-color-gray-4);
  }

  .btn {
    color: var(--sl-color-gray-10);
    font-weight: 500;
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
  }
</style>
